<template>
	<view id="searchOutcome">
		<view class="home_top_search">
			<u-search bgColor="#fff7f3" @blur="blur" :action-style="{ background: '#fd6500' }" shape="square"
				placeholder="找寻你想要的内容" v-model="searchText">
			</u-search>
		</view>
		<view :class="[{ 'active': activeIndex === index }, 'found_content']" v-for="(item,index) in list"
			@click="setActive(index)">
			<view class="found_content_img">
				<image :src="item.slider" mode="widthFix"></image>
			</view>
			<view class="found_content_text">
				<u-row gutter="0">
					<u-col span="3">
						<view class="found_content_text_img">
							<image :src="item.headimg" mode="widthFix"></image>
						</view>
					</u-col>
					<u-col span="9">
						<view class="found_content_text_text">
							<p>阿牟AMFIG<text class="title">游戏</text></p>
							<p class="fontsize">正在创作 正在开发独立游戏[罗德里]</p>
							<p class="fontsize">399发电人次/月</p>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '', //搜索信息
				list: [],
				activeIndex: null,
			}
		},
		mounted() {
			this.getDynamicListAll();
		},
		methods: {
			setActive(index) {
				this.activeIndex = index;
			},
			getDynamicListAll() {
				this.$api.getDynamicListAll({

				}).then(res => {
					console.log("res", res.data.data);
					this.list = res.data.data;
				})
			},
			blur() {
				this.$emit("searchText", this.searchText);
				this.searchText = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-search__action--active {
		padding: 7px !important;
		border-radius: 0 5px 5px 0 !important;
		margin: 0 !important;
		color: #fff !important;
	}
	
	
	.found_content {
		width: 90%;
		display: inline-block;
		margin: 40rpx;
		box-shadow: 3px 6px 7px 2px #ededed;
		border: 2px solid transparent;
	
		// display: flex;
		.found_content_img {
			width: 100%;
			height: 40vw;
			/* 通过设置高度为宽度的25%来实现4:1的比例 */
			position: relative;
			/* 为了让内部的image相对定位 */
			overflow: hidden;
			/* 隐藏超出容器的部分 */
	
			image {
				width: 100%;
				height: auto;
				/* 保持图像的宽高比 */
				position: absolute;
				/* 绝对定位以覆盖整个容器 */
				top: 50%;
				/* 垂直居中 */
				left: 50%;
				/* 水平居中 */
				transform: translate(-50%, -50%);
				/* 调整偏移，使图像中心对齐 */
			}
		}
	
		.found_content_text {
			line-height: 50rpx;
	
			.found_content_text_img {
				// width: 100%;
				// height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
	
			.found_content_text_text {
				// background-color: #ffff00;
				// height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-size: 32rpx;
	
				.title {
					display: inline-block;
					width: 80rpx;
					// height: 40rpx;
					margin-left: 20rpx;
					background-color: #9968f0;
					border-radius: 5rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					font-size: 20rpx;
				}
	
				.fontsize {
					font-size: 24rpx;
					overflow: hidden;
					/* 隐藏超出内容 */
					white-space: nowrap;
					/* 不换行 */
					text-overflow: ellipsis;
					/* 使用省略号表示截断 */
				}
			}
	
			image {
				width: 80%;
				height: 70%;
				border-radius: 200rpx;
			}
		}
	
	
	}
	.active {
		border-color:#9968f0 !important;
		border-radius: 10rpx;
	}
	

	#searchOutcome {
		width: 100%;
	}

	.home_top_search {
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
	}
</style>